<script>
import outMain from "@/components/outMain.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { biographicalNotesExcel } from "@/http/api";
import html2pdf from "html2pdf.js";
import ChineseHelper from "@/utils/ChineseHelpr.js";

export default {
  components: { outMain },
  name: "",
  data() {
    return {
      detailId: this.$route.query.id,
      showCont: false,
      has_zdArr: [],
      disNumArr: [
        "江证",
        "健康证(海事)",
        "健康证(卫检)",
        "接种证(霍乱)",
        "接种证(黄热)",
      ],
      zs_english: [
        { name: "身份证号码", value: "ID No." },
        { name: "护照号码", value: "Passport No." },
        { name: "海员证号码", value: "seafarer‘s passport No." },
        { name: "适任证书号码", value: "Certificate of Competency No." },
        { name: "服务薄号码", value: "seafarer's identity document No." },
        { name: "海船船员培训合格证书", value: "Cert. of proficiency No." },
        { name: "特殊专业培训证书", value: "Special Training Certificate No." },
        { name: "船舶保安员证书", value: "SSO Cert." },
        { name: "江证", value: "YZ river nav. qualification cert " },
        { name: "外籍证书", value: "Foreign License" },
        { name: "健康证(海事)", value: "Health Cert. MSA" },
        { name: "健康证(卫检)", value: "Health Cert. Quarantine" },
        { name: "接种证(霍乱)", value: "Vaccination Cert. Cholera" },
        { name: "接种证(黄热)", value: "Vaccination Cert. Yellow fever" },
      ],
      zw_english: [
        { name: "船长", value: "CAPT" },
        { name: "大副", value: "C/O" },
        { name: "二副", value: "2/O" },
        { name: "三副", value: "3/O" },
        { name: "驾助", value: "J/O" },
        { name: "GMDSS普操员", value: "GMDSS operator" },
        { name: "轮机长", value: "C/E" },
        { name: "大管轮", value: "2/E" },
        { name: "二管轮", value: "3/E" },
        { name: "三管轮", value: "4/E" },
        { name: "轮助", value: "J/E" },
        { name: "电子员", value: "E/O" },
        { name: "电工", value: "E/T" },
        { name: "水手长", value: "BSN" },
        { name: "木匠", value: "CARPT" },
        { name: "高水", value: "S/AB" },
        { name: "水手", value: "AB" },
        { name: "甲板实习生", value: "D/CDT" },
        { name: "机工长", value: "CH/MM" },
        { name: "修理工", value: "FTR" },
        { name: "高机", value: "S/MM" },
        { name: "机工", value: "MM" },
        { name: "机舱实习生", value: "E/CDT" },
        { name: "管事", value: "CH/STWD" },
        { name: "大厨", value: "CH/CK" },
        { name: "大台", value: "STEWARD" },
        { name: "二厨", value: "COOK" },
      ],
    };
  },
  props: {},
  setup() {},
  methods: {
    getTime(time) {
      if (!time) {
        return "";
      }
      const y = time.getFullYear();
      const m =
        time.getMonth() < 9 ? `0${time.getMonth() + 1}` : time.getMonth() + 1;
      const d = time.getDate() < 10 ? `0${time.getDate()}` : time.getDate();
      const h = time.getHours() < 10 ? `0${time.getHours()}` : time.getHours();
      const f =
        time.getMinutes() < 10 ? `0${time.getMinutes()}` : time.getMinutes();
      const s =
        time.getSeconds() < 10 ? `0${time.getSeconds()}` : time.getSeconds();
      const str = `${y}-${m}-${d} ${h}:${f}:${s}`;
      return str;
    },
    getZwEnglish(name) {
      let result = this.zw_english.filter((item) => {
        return item.name == name;
      });
      return result[0]?.value;
    },
    getZsEnglish(name) {
      let result = this.zs_english.filter((item) => {
        return item.name == name;
      });
      return result[0]?.value;
    },
    changeStr(str) {
      return ChineseHelper.ConvertPinyin(str);
    },
    getData() {
      biographicalNotesExcel({ biographical_notes_id: this.detailId }).then(
        (res) => {
          if (res.data.code == 1) {
            this.formData = res.data.data;
            this.has_zdArr = res.data.data.zs_json.filter((item) => {
              return item.number || item.time;
            });
            // this.has_zdArr = res.data.data.zs_json;
            this.showCont = true;
          }
        }
      );
    },
    downFn() {
      let element = document.querySelector(".syCont");
      const options = {
        margin: 10,
        filename: `船员推荐表(${this.formData.real_name}).pdf`,
        image: { type: "jpeg", quality: 0.98 },
        html2canvas: { scale: 4 },
        useCORS: true,
        jsPDF: { unit: "mm", format: "a3", orientation: "portrait" },
      };
      html2pdf().set(options).from(element).save();
    },
    backFn() {
      this.$router.back();
    },
  },
  mounted() {},
  created() {
    this.getData();
  },
};
</script>
<template>
  <outMain>
    <div class="tableCont_">
      <div class="tableName flexCont">
        <div>船员推荐表</div>
        <div class="flexCont">
          <el-button
            class="downBtn"
            style="margin-right: 15px"
            color="#626aef"
            @click="backFn"
            >返回上一级</el-button
          >
          <el-button class="downBtn" plain color="#626aef" @click="downFn"
            >一键下载简历</el-button
          >
        </div>
      </div>
      <div class="syCont" v-if="showCont">
        <el-watermark :width="120" :height="120" image="/img/sy_img.png">
          <div class="exportTable">
            <div class="exportHead">
              <div class="logoImg">
                <img :src="formData.enterprise_info.enterprise_logo" />
              </div>
              <div class="exportHeadInfo">
                <div class="exportHeadName">
                  {{ formData.enterprise_info.enterprise_name }}
                </div>
                <div
                  class="englishName"
                  v-if="formData.enterprise_info.enterprise_english_name"
                >
                  {{ formData.enterprise_info.enterprise_english_name }}
                </div>
                <div
                  class="exportHeadAddress"
                  v-if="formData.enterprise_info.enterprise_address"
                >
                  地址：{{ formData.enterprise_info.enterprise_address }}
                </div>
              </div>
            </div>
            <el-divider content-position="center"
              >船员推荐表/SEAFARER'S APPLICATION FORM</el-divider
            >
            <div class="tableHead">
              <div class="tableTr pullHead">
                <div>个人信息</div>
                <div>PERSONAL INFORMATION</div>
              </div>
            </div>
            <div class="tableBody flexBody">
              <div class="tableleft">
                <div class="tableTop">
                  <div class="tableInfoItem tableInfoItem_">
                    <div class="tableInfoItemName">
                      <div>姓名</div>
                      <div>Name</div>
                    </div>
                    <div class="tableInfoItemText">
                      <div>{{ formData.real_name }}</div>
                      <div v-if="formData.real_name">
                        {{ changeStr(formData.real_name) }}
                      </div>
                    </div>
                  </div>
                  <div class="tableInfoItem">
                    <div class="tableInfoItemName">
                      <div>职务</div>
                      <div>Rank</div>
                    </div>
                    <div class="tableInfoItemText">
                      <div>{{ formData.zw }}</div>
                      <div>{{ getZwEnglish(formData.zw) }}</div>
                    </div>
                  </div>
                  <div class="tableInfoItem">
                    <div class="tableInfoItemName">
                      <div>国籍</div>
                      <div>Nat</div>
                    </div>
                    <div class="tableInfoItemText">
                      <div>{{ formData.gj }}</div>
                    </div>
                  </div>
                  <div class="tableInfoItem tableInfoItem_">
                    <div class="tableInfoItemName">
                      <div>出生日期</div>
                      <div>Date of Birth</div>
                    </div>
                    <div class="tableInfoItemText">
                      <div>{{ formData.birthday_time }}</div>
                    </div>
                  </div>
                  <div class="tableInfoItem">
                    <div class="tableInfoItemName">
                      <div>出生地</div>
                      <div>Birthplace</div>
                    </div>
                    <div class="tableInfoItemText">
                      <div>{{ formData.csd }}</div>
                      <div v-if="formData.csd">
                        {{ changeStr(formData.csd) }}
                      </div>
                    </div>
                  </div>
                  <div class="tableInfoItem">
                    <div class="tableInfoItemName">
                      <div>电话</div>
                      <div>Mobile</div>
                    </div>
                    <div class="tableInfoItemText">
                      <div>{{ formData.mobile }}</div>
                    </div>
                  </div>
                </div>
                <div class="tableUnder">
                  <div class="tableInfoItem tableInfoItem_">
                    <div class="tableInfoItemName">
                      <div>英语水平</div>
                      <div>English proficiency</div>
                    </div>
                    <div class="tableInfoItemText">
                      <div>{{ formData.yysp }}</div>
                    </div>
                  </div>
                  <div class="tableInfoItem pullItem">
                    <div class="tableInfoItemName">
                      <div>住址</div>
                      <div>Address</div>
                    </div>
                    <div class="tableInfoItemText">
                      <div>
                        {{ formData.jg }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="tableUserImg">
                <img
                  v-if="formData.gr_photo"
                  :src="formData.gr_photo.split(',')[0]"
                />
              </div>
            </div>
            <div class="tableHead">
              <div class="tableTr tableTr_">
                <div>教育背景</div>
                <div>EDUCATION</div>
              </div>
              <div class="tableTr hasLeft">
                <div>紧急联系人</div>
                <div>Emergency contact</div>
              </div>
              <div class="tableTr hasLeft">
                <div>其他信息</div>
                <div>Other Info</div>
              </div>
            </div>
            <div class="tableBody flexBody">
              <div class="tableleft">
                <div class="tableTop">
                  <div class="tableInfoItem tableInfoItem_">
                    <div class="tableInfoItemName">
                      <div>学校</div>
                      <div>College</div>
                    </div>
                    <div class="tableInfoItemText">
                      <div>{{ formData.byyx }}</div>
                    </div>
                  </div>
                  <div class="tableInfoItem">
                    <div class="tableInfoItemName">
                      <div>家属姓名</div>
                      <div>Family Name</div>
                    </div>
                    <div class="tableInfoItemText">
                      <div>{{ formData.jjlxr_name }}</div>
                      <div v-if="formData.jjlxr_name">
                        {{ changeStr(formData.jjlxr_name) }}
                      </div>
                    </div>
                  </div>
                  <div class="tableInfoItem">
                    <div class="tableInfoItemName">
                      <div>身高/体重</div>
                      <div>Height/Weight</div>
                    </div>
                    <div class="tableInfoItemText">
                      <div>{{ formData.height }}CM/{{ formData.weight }}KG</div>
                    </div>
                  </div>
                  <div class="tableInfoItem tableInfoItem_">
                    <div class="tableInfoItemName">
                      <div>学历</div>
                      <div>Degree</div>
                    </div>
                    <div class="tableInfoItemText">
                      <div>{{ formData.xl }}</div>
                    </div>
                  </div>
                  <div class="tableInfoItem">
                    <div class="tableInfoItemName">
                      <div>家属关系</div>
                      <div>Relationship</div>
                    </div>
                    <div class="tableInfoItemText">
                      <div>{{ formData.jjlxr_gx }}</div>
                    </div>
                  </div>
                  <div class="tableInfoItem">
                    <div class="tableInfoItemName">
                      <div>工服尺寸/鞋码</div>
                      <div>Boiler Suit/Shoes</div>
                    </div>
                    <div class="tableInfoItemText">
                      <div>{{ formData.gfcc }}/{{ formData.shoe_size }}码</div>
                    </div>
                  </div>
                  <div class="tableInfoItem tableInfoItem_">
                    <div class="tableInfoItemName">
                      <div>毕业日期</div>
                      <div>Date of Graduation</div>
                    </div>
                    <div class="tableInfoItemText">
                      <div>{{ formData.bysj }}</div>
                    </div>
                  </div>
                  <div class="tableInfoItem">
                    <div class="tableInfoItemName">
                      <div>紧急人电话</div>
                      <div>Tel</div>
                    </div>
                    <div class="tableInfoItemText">
                      <div>{{ formData.jjlxr_mobile }}</div>
                    </div>
                  </div>
                  <div class="tableInfoItem">
                    <div class="tableInfoItemName">
                      <div>血型</div>
                      <div>blood</div>
                    </div>
                    <div class="tableInfoItemText">
                      <div>{{ formData.blood_type }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="tableHead">
              <div class="tableTr pullHead">
                <div>证书情况</div>
                <div>CERTIFICATES</div>
              </div>
            </div>
            <div class="tableBody flexBody" v-if="has_zdArr.length > 0">
              <div class="tableleft">
                <div
                  class="tableTop"
                  :key="index"
                  v-for="(item, index) in has_zdArr"
                >
                  <div
                    :class="
                      disNumArr.includes(item.name)
                        ? 'tableInfoItem tableInfoItem_pull'
                        : 'tableInfoItem tableInfoItem_'
                    "
                  >
                    <div class="tableInfoItemName">
                      <div>证件名称</div>
                      <div>Name of certificate</div>
                    </div>
                    <div class="tableInfoItemText">
                      <div>{{ item.name }}</div>
                      <div>{{ getZsEnglish(item.name) }}</div>
                    </div>
                  </div>
                  <div
                    class="tableInfoItem"
                    v-if="!disNumArr.includes(item.name)"
                  >
                    <div class="tableInfoItemName">
                      <div>
                        {{
                          [
                            "特殊专业培训证书",
                            "船船保安员证书",
                            "外籍证书",
                          ].includes(item.name)
                            ? "证件种类"
                            : "证件编号"
                        }}
                      </div>
                      <div>
                        {{
                          [
                            "特殊专业培训证书",
                            "船船保安员证书",
                            "外籍证书",
                          ].includes(item.name)
                            ? "type of Certificate"
                            : "Certificate number"
                        }}
                      </div>
                    </div>
                    <div class="tableInfoItemText">
                      <div>{{ item.number }}</div>
                    </div>
                  </div>
                  <div class="tableInfoItem">
                    <div class="tableInfoItemName">
                      <div>到期日期</div>
                      <div>Due date</div>
                    </div>
                    <div class="tableInfoItemText">
                      <div>{{ item.time }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="tableBody" v-if="has_zdArr.length == 0">
              <el-empty image-size="50" description="暂无证书" />
            </div>
            <div class="tableHead">
              <div class="tableTr pullHead">
                <div>工作经历</div>
                <div>PREVIOUS SEA EXPERIENCE</div>
              </div>
            </div>
            <div
              class="tableheadName"
              v-if="formData.resume_experience.length > 0"
            >
              <div class="tableheadNameItem tableheadNameItem_">
                <div>船名</div>
                <div>Ship Name</div>
              </div>
              <div class="tableheadNameItem">
                <div>船型</div>
                <div>Type</div>
              </div>
              <div class="tableheadNameItem tableheadNameItem_">
                <div>总吨/马力</div>
                <div>GRT/HP</div>
              </div>
              <div class="tableheadNameItem tableheadNameItem_">
                <div>职务</div>
                <div>Rank</div>
              </div>
              <div class="tableheadNameItem">
                <div>上船时间</div>
                <div>Sign on date</div>
              </div>
              <div class="tableheadNameItem">
                <div>下船时间</div>
                <div>Sign off date</div>
              </div>
              <div class="tableheadNameItem tableheadNameItem_">
                <div>公司名称</div>
                <div>Company Name</div>
              </div>
              <div class="tableheadNameItem">
                <div>航线</div>
                <div>Trading Area</div>
              </div>
            </div>
            <div class="tableBody">
              <div
                class="worlItem"
                :key="index"
                v-for="(item, index) in formData.resume_experience"
              >
                <div class="workTd workTd_">{{ item.cm }}</div>
                <div class="workTd">{{ item.cx }}</div>
                <div class="workTd workTd_">{{ item.zd }}/{{ item.ml }}</div>
                <div class="workTd workTd_">{{ item.zw }}</div>
                <div class="workTd">{{ item.scsj }}</div>
                <div class="workTd">{{ item.xcsj }}</div>
                <div class="workTd workTd_">{{ item.comName }}</div>
                <div class="workTd">{{ item.hx }}</div>
              </div>
            </div>
            <div
              class="tableBody"
              v-if="formData.resume_experience.length == 0"
            >
              <el-empty image-size="50" description="暂无工作经历" />
            </div>
            <div class="up_time">
              <div>鲸领航官网：https://whalenav.cn</div>
              <div>生成日期：{{ getTime(new Date()) }}</div>
            </div>
          </div>
        </el-watermark>
      </div>
    </div>
  </outMain>
</template>
<style scoped lang="less">
.tableCont_ {
  background-color: #fff;
  padding: 15px;
  padding-bottom: 30px;
  box-sizing: border-box;
  border-radius: 5px;
  .flexCont {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.syCont {
  width: 1000px;
  margin: 0 auto;
  margin-top: 30px;
  box-sizing: border-box;
  border: 1px solid #ebebeb;
  .exportTable {
    width: 100%;
    box-sizing: border-box;
    .exportHead {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 30px 100px;
      box-sizing: border-box;
      .logoImg {
        width: 80px;
        height: 80px;
        border-radius: 5px;
        overflow: hidden;
        background-color: #0071bc;
        img {
          width: 100%;
        }
      }
      .exportHeadInfo {
        margin-left: 15px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: 80px;
        .exportHeadName {
          font-size: 20px;
          font-weight: bold;
        }
        .englishName,
        .exportHeadAddress {
          font-size: 12px;
        }
      }
    }
    .tableHead {
      background-color: #0071bc;
      display: flex;
      color: #fff;
      padding: 10px 0;
      .tableTr {
        width: 33%;
        text-align: center;
        box-sizing: border-box;
      }
      .tableTr_ {
        width: 34%;
      }
      .hasLeft {
        border-left: 1px solid #fff;
      }
      .pullHead {
        width: 100%;
      }
    }
    .tableheadName {
      width: 100%;
      display: flex;
      text-align: center;
      background-color: #ebf4fa;
      .tableheadNameItem {
        padding: 10px 0;
        font-size: 12px;
        width: 10%;
      }
      .tableheadNameItem_ {
        width: 15%;
      }
    }
    .tableBody {
      width: 100%;
      font-size: 12px;
      .tableleft {
        width: 85%;
        flex: 1;
        .tableTop,
        .tableUnder {
          display: flex;
          flex-wrap: wrap;
          .tableInfoItem {
            width: 33%;
            box-sizing: border-box;
            border-bottom: 1px solid #ddd;
            display: flex;
            align-items: center;
            .tableInfoItemName {
              width: 120px;
              text-align: center;
              padding: 10px 0;
              background-color: #ebf4fa;
            }
            .tableInfoItemText {
              text-align: center;
              flex: 1;
              width: 120px;
            }
          }
          .pullItem {
            width: 66%;
            .tableInfoItemName {
              width: 120px;
            }
          }
          .tableInfoItem_ {
            width: 34%;
          }
          .tableInfoItem_pull {
            width: 67%;
          }
        }
      }
      .tableUserImg {
        width: 15%;
        border-left: 1px solid #ddd;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 80%;
        }
      }
      .worlItem {
        width: 100%;
        display: flex;
        text-align: center;
        border-top: 1px solid #ddd;
        .workTd {
          padding: 15px 0;
          width: 10%;
        }
        .workTd_ {
          width: 15%;
        }
      }
    }
    .flexBody {
      display: flex;
    }
    .up_time {
      text-align: center;
      color: #666;
      font-size: 14px;
      display: flex;
      justify-content: space-between;
      padding: 10px 20px;
      box-sizing: border-box;
    }
  }
}
</style>
